/*
  学习目标：props校验
  作用：指定标签属性的类型，违反则报错, 类似Vue中props的对象写法
  1. 引进prop-types
  2. 给组件设置规则对象
  // 💥 组件名.propTypes = { 规则 }

  vue2:
  props: { msg: { type: String, default: '默认'} }
*/
import React from 'react';
// 1. 引进props-types
import PropTypes from 'prop-types';
class App extends React.Component {
  render() {
    return (
      <div>
        我是app父组件
        <Child
          str="字符串"
          arr={[]}
          bl={false}
          fn={() => {}}
          obj={{ name: 'zs' }}
          student={{ name: 'zs', age: 20 }}
          jsx={<div>jsx</div>}
        ></Child>
      </div>
    );
  }
}
class Child extends React.Component {
  render() {
    return (
      <div>
        我是Child子组件 - {this.props.str} - {this.props.num}
      </div>
    );
  }
}
// 给组件设置校验规则，注意属性名是小写
// 1. 常见类型：array、number、string、bool、func、object
// 2. 特定结构的对象：shape
// 3. React元素类型：element
// 3. 必填项：isRequired
Child.propTypes = {
  str: PropTypes.string.isRequired,
  num: PropTypes.number,
  arr: PropTypes.array,
  // 注意 bool 和 func 的写法
  bl: PropTypes.bool,
  fn: PropTypes.func,
  obj: PropTypes.object,
  student: PropTypes.shape({
    name: PropTypes.string,
    age: PropTypes.number,
  }),
  jsx: PropTypes.element,
};

export default App;
